<template>
	<view>
		<view>
			绿色代表分钟结点在线
		</view>
		<view v-for="(item1,index1) in timeArray" :key="index1+'item1'"  class="u-flex u-flex-wrap list-h" >
			<view>小时{{index1}}:</view>
			<view v-for="(item,index) in item1" :key="index+'item2'"  class="item"  :class="pingLog[item]?'on':'no'">
				{{index+1}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: '',

		mixins: [],

		components: {},

		props: {},

		data() {
			return {
				timeArray:[],
				pingLog:{}
			}
		},

		computed: {},

		watch: {},

		created() {},

		onShow(){
			this.createPingLog()
			this.createTimeForm()
		},
		
		mounted() {},

		destroyed() {},

		methods: {
			createPingLog(){
				const obj={}
				this.$store.state.log.pingTime.forEach(item=>{
					const key=this.$u.timeFormat(item,'hh-MM')
					obj[key]=true
				})
				this.pingLog = obj
			},
			createTimeForm(){
				let d=new Date()
				let m=59
				let h=d.getHours();
				let  m_arr=[]
				let h_arr=[]	
				while(m>0 && h>-1){
					const _h= h>9?h:'0'+h
					const _m= m>9?m:'0'+m
					m_arr.unshift(''+_h+'-'+_m);
					m--;
					if(m===0){
						h_arr.unshift(m_arr)
						m=59;
						h--;
						m_arr=[]
					}
				}
				this.timeArray=h_arr
			}
		}
	};
</script>

<style scoped lang="scss">
	.item{
		width: 20px;
		height: 20px;
		margin: 4px;
	}
	.on{
		background-color: #55aa00;
	}
	.no{
		background-color: #ff557f;
	}
	.list-h{
		margin: 10px 0;
	}
</style>
